<template>
  <div class="song_detail_more" @click.self="clickColse()">
    <div class="main" v-if="song_data_flag">
      <div class="top">
        <div class="left">
          <div class="img">
            <img v-lazy="song_data.songs[0].al.picUrl" alt />
          </div>
          <div class="info">
            <p class="name">歌曲：{{song_data.songs[0].name}}</p>
            <p class="author">
              <span v-for="(item,index) in song_data.songs[0].ar" :key="index">
                {{item.name}}
                <span v-if="index<song_data.songs[0].ar.length-1">/</span>
              </span>
            </p>
          </div>
        </div>
      </div>
      <div class="detail">
        <ul>
          <!-- <li>
            <div class="img">
              <img src="../images/b2z.png" alt />
            </div>
            <p>赞赏该曲（4601次）</p>
          </li>-->
          <li class="click_hover" @click="clickCollect()">
            <div class="img">
              <img src="../images/b2_.png" alt />
            </div>
            <p>收藏到歌单</p>
          </li>
          <li class="click_hover" @click.stop="artistClick(song_data.songs[0].ar)">
            <div class="img">
              <img src="../images/b20.png" alt />
            </div>
            <p>
              歌手：
              <span v-for="(item,index) in song_data.songs[0].ar" :key="index">
                {{item.name}}
                <span v-if="index<song_data.songs[0].ar.length-1">/</span>
              </span>
            </p>
          </li>
          <li class="click_hover">
            <div class="img">
              <img src="../images/b1y.png" alt />
            </div>
            <p>专辑：{{song_data.songs[0].al.name}}</p>
          </li>
          <li class="click_hover" @click="clickSource(source)" v-show="isSource">
            <div class="img">
              <img src="../images/b2b.png" alt />
            </div>
            <p>来源：{{source | filterSource}}</p>
          </li>
          <li class="click_hover" v-show="song_data.songs[0].mv">
            <div class="img">
              <img src="../images/b37.png" alt />
            </div>
            <p>查看视频</p>
          </li>
          <li class="click_hover">
            <div class="img">
              <img src="../images/b31.png" alt />
            </div>
            <p>相似推荐</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: ["songId"],
  data() {
    return {
      source: "", // 来源
      userId: "", // 用户id
      isSource: false // 是否显示来源
    };
  },
  computed: {
    ...mapState("song_detail", ["song_data","song_data_flag"])
  },
  created() {
    this.getSongDetail();
    this.getSource();
  },
  methods: {
    // 跳转歌手详情页
    artistClick(ar) {
      if (ar.length == 1) {
        this.$router.push({ name: "Artist", query: { id: ar[0].id } });
      } else if (ar.length > 1) {
        let list = [];
        for (let i = 0; i < ar.length; i++) {
          let element = ar[i];
          list.push(element.id);
        }
        this.$emit("artistsId", { idList: list });
      }
    },
    // 点击遮罩层关闭
    clickColse() {
      this.$emit("songDatailClose");
    },
    // 收藏到歌单点击事件
    clickCollect() {
      Promise.all([this.refresh()]).then(() => {
        this.$emit("showUserPlaylist");
        this.$emit("songDatailClose");
      });
    },
    // 来源点击事件
    clickSource(source) {
      this.$router.push({ name: source });
    },
    // 获取歌曲信息
    getSongDetail() {
      this.$store.dispatch("song_detail/getSongData", {
        ids: this.songId
      });
    },
    // 获取来源
    getSource() {
      if (this.$route.name == "SongDetail") {
        let data = JSON.parse(localStorage.song_list_id);
        for (let i in data) {
          if (data.hasOwnProperty(i)) {
            let element = data[i];
            if (element.id == this.songId) {
              this.source = element.name;
              this.isSource = true;
              return;
            }
          }
        }
      } else {
        this.isSource = false;
      }
    },
    // 登录判断
    refresh() {
      return new Promise((resolve, reject) => {
        this.$store.dispatch("login_refresh/getLoginRefreshData", {}).then(
          data => {
            if (data.code == 200) {
              this.$store.dispatch("login_status/getLoginStatusData", {}).then(
                data => {
                  if (data.code == 200) {
                    this.userId = data.profile.userId;
                    resolve(this.userId);
                  }
                },
                () => {
                  this.$router.push({ name: "LoginSelect" });
                }
              );
            }
          },
          () => {
            this.$router.push({ name: "LoginSelect" });
          }
        );
      });
    }
  },
  filters: {
    // 来源转化
    filterSource(value) {
      switch (value) {
        case "Recommend":
          return "每日推荐";
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.song_detail_more {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1001;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .main {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #fff, $alpha: 1);
    width: 100%;
    max-height: 8rem;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 0.4rem;
    border-top-left-radius: 0.4rem;
    .top {
      padding: 0.3rem;
      border-bottom: 0.02rem solid #eee;
      .left {
        overflow: hidden;
        .img {
          float: left;
          img {
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 0.1rem;
          }
        }
        .info {
          margin-left: 0.2rem;
          float: left;
          text-align: left;
          .name {
            margin-top: 0.2rem;
            line-height: 0.5rem;
            font-size: 0.32rem;
          }
          .author {
            font-size: 0.26rem;
            color: #999;
          }
        }
      }
    }
    .detail {
      flex: 1;
      overflow-y: auto;
      ul {
        li {
          padding-left: 0.2rem;
          line-height: 1rem;
          overflow: hidden;
          .img {
            float: left;
            img {
              display: inline-block;
              width: 0.65rem;
              height: 0.65rem;
              vertical-align: middle;
              margin-top: -0.1rem;
              -webkit-filter: contrast(0%);
              filter: contrast(0%);
            }
          }
          p {
            float: left;
            text-align-last: left;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }
}
</style>